<template>
	<view class="modify pages">
		<!-- 顶部空余 -->
		<view style="width: 100%;height: var(--status-bar-height)"></view>
		<header>
			<view class="back" @tap="back">
				<uni-icons type="back" size="25"></uni-icons>
			</view>
			<view class="title">
				{{title}}
			</view>
			<view class="save" v-if="key=='nickname'" :style="{color:nickname==''?'#bbbbbb':'#20c9ca'}"
				@click="saveModify">
				{{$t('mine.modifyInfo.Save')}}
			</view>
			<view class="save" v-if="key=='sign'" :style="{color:sign==''?'#bbbbbb':'#20c9ca'}" @click="saveModify">
				{{$t('mine.modifyInfo.Save')}}
			</view>
		</header>
		<view class="container">
			<view class="modify_nickname" v-if="key=='nickname'">
				<view class="input_container">
					<input type="text" v-model="nickname" :maxlength="36">
				</view>
				<view class="txt">
					{{$t('mine.modifyInfo.The')}}
				</view>
			</view>
			<view class="modify_sign" v-if="key=='sign'">
				<u--textarea v-model="sign" :placeholder="signPlaceholder" count height="240"></u--textarea>
			</view>
			<view class="modify_sex" v-if="key=='sex'">
				<view class="sex_item" v-for="item in sexList" @tap="choseSex(item)">
					<view class="sex_title">
						{{item.name}}
					</view>
					<view class="sex_chose" :class="sex==item?'active':''">
						<uni-icons type="checkmarkempty" :color="sex==item?'#59e8e8':'#fff'"></uni-icons>
					</view>
				</view>
			</view>
			<view class="modify_birthday" v-if="key=='birthday'">
				<view class="birthday_title">
					{{birthday!=""?$t('mine.modifyInfo.Modify'):$t('mine.modifyInfo.Please')}}
				</view>
				<!-- 更换选择日期组件 -->
				<!-- <uni-datetime-picker type="date" :clear-icon="false" v-model="birthday" :border="false" :clearIcon="false" @change="changeBirthday" /> -->
				<view class="birthSelect" @click="birthdayShow=true">
					<uni-icons type="calendar" size="25" color="#aaa"></uni-icons>
					<view class="pick">{{$t('mine.modifyInfo.Picker')}}</view>
					<u-datetime-picker :show="birthdayShow" v-model="birthday" mode="date" @cancel='birthdayShow=false'
						@confirm='changeBirthday' :cancelText="$t('mine.modifyInfo.Cancel')"
						:confirmText="$t('mine.modifyInfo.Confirm')" :minDate="-946800000"></u-datetime-picker>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		userUpdateUser
	} from "@/api/api.js"
	export default {
		data() {
			return {
				key: "",
				title: "",
				nickname: "",
				sign: "",
				signPlaceholder: this.$t('mine.modifyInfo.You'),
				sexList: [{
						name: this.$t('mine.modifyInfo.Man'),
						id: 1
					},
					{
						name: this.$t('mine.modifyInfo.Woman'),
						id: 2
					},
				],
				sex: '',
				birthdayShow: false,
				time: Number(new Date()),
				birthday: Number(new Date())
			}
		},
		onLoad(opt) {
			this.key = opt.key
			switch (this.key) {
				case "nickname":
					this.title = this.$t('mine.modifyInfo.Nickname')
					break;
				case "sign":
					this.title = this.$t('mine.modifyInfo.Signature')
					break;
				case "sex":
					this.title = this.$t('mine.modifyInfo.Gender')
					break;
				case "birthday":
					this.title = this.$t('mine.modifyInfo.Birthday')
					break;
				default:
					break;
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			saveModify() {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				switch (this.key) {
					case "nickname":
						// prevPage.$vm.userinfo.nick_name = this.nickname;
						userUpdateUser({
							token: uni.getStorageSync('token'),
							nick_name: this.nickname
						}).then(res => {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
							setTimeout(() => {
								this.back()
							}, 600)
						})
						break;
					case "sign":
						userUpdateUser({
							token: uni.getStorageSync('token'),
							desc: this.sign
						}).then(res => {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
							setTimeout(() => {
								this.back()
							}, 600)
						})
						break;
					default:
						break;
				}
			},
			// choseSex(e) {
			// 	this.sex = e
			// 	let pages = getCurrentPages(); //获取所有页面栈实例列表
			// 	let prevPage = pages[pages.length - 2]; //上一页页面实例
			// 	prevPage.$vm.userinfo.sex = e.id;
			// 	setTimeout(() => {
			// 		this.back()
			// 	}, 500)
			// },
			// async changeBirthday(value) {
			// 	this.birthdayShow = false
			// 	const timeFormat = uni.$u.timeFormat;
			// 	let timeValue = await timeFormat(value.value, 'yyyy-mm-dd');
			// 	let pages = getCurrentPages(); //获取所有页面栈实例列表
			// 	let prevPage = pages[pages.length - 2]; //上一页页面实例
			// 	prevPage.$vm.userInfo.birthday = timeValue;
			// 	setTimeout(() => {
			// 		this.back()
			// 	}, 500)
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.modify {
		width: 100%;
		height: 100vh;

		header {
			width: 100%;
			height: 120rpx;
			padding: 0 40rpx;
			background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.back {
				position: absolute;
				left: 40rpx;
			}

			.title {
				font-size: 36rpx;
			}

			.save {
				font-size: 32rpx;
				color: #bbbbbb;
				position: absolute;
				right: 40rpx;
			}
		}

		.container {
			width: 100%;
			height: calc(100vh - 120rpx);
			background-color: #fafafa;
			background-image: none;

			.modify_nickname {
				padding-top: 80rpx;

				.input_container {
					width: 100%;
					height: 100rpx;
					background: #fff;

					uni-input {
						width: 100%;
						height: 100%;
						font-size: 32rpx;
						line-height: 100rpx;
						padding-left: 40rpx;
						padding-right: 40rpx;
					}
				}

				.txt {
					margin: 30rpx 40rpx;
					color: #b5b5c3;
					font-size: 28rpx;
				}
			}

			.modify_sign {
				padding-top: 40rpx;

				/deep/.u-textarea {
					border: none;
				}
			}

			.modify_sex {
				margin-top: 90rpx;
				padding: 0 20rpx;
				background: #fff;

				.sex_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 100rpx;
					font-size: 28rpx;
					color: #aaa;
					border-bottom: 2rpx solid #fafafa;
					padding: 0 20rpx;

					&.sex_item:last-child {
						border-bottom: 2rpx solid transparent;
					}

					.sex_chose {
						width: 40rpx;
						height: 40rpx;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 2rpx solid #fff
					}

					.active {
						border: 2rpx solid #59e8e8;
					}
				}
			}

			.modify_birthday {
				padding-top: 90rpx;

				.birthSelect {
					padding: 0 20rpx;
					font-size: 28rpx;
					color: #aaa;
					display: flex;
					align-items: center;
				}

				.birthday_title {
					padding: 0 20rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #aaa;
				}
			}
		}
	}
</style>